<template>
    <div v-loading="loading1" style="background:white;width: 100%;max-height:100%;overflow: auto;padding:30px;margin;0px;font-size:12px;margin-bottom:10px;" >
        <el-row >
            <el-col :span="24" style="border:0px;">
                <div class="grid-content"  >
                    <div style="text-align:center;margin:auto;font-size:30px;">右轴系(含主机遥控、齿轮箱、艉管、轴承）</div>
                </div>
            </el-col>
        </el-row>
      <el-col :span="24" style="position: relative;text-align:center;align-items:center;align-content:center;justify-content: center;  height:350px;margin-top:20px;">
              <img :src="url" style="width:80%;height: 50%;margin-bottom:20px;">
              <div style="height:30%;width:30%;position:absolute;top:-20px;left:15%">
                <temperature-chart :barTitle="bar.title" :height="'200px'" :x-data="bar.xDatas" :y-data="bar.yDatas" :unit="bar.unit" />
           </div>
      </el-col>         

        
        <el-row >
            <el-col :span="6" >
                <div style="border:1px solid black;">
                    <h1 style="text-align:center; padding:10px ; align-content:center">2#齿轮箱模拟量报警和显示</h1>
                
                    <div  v-for="(item,index) in data.one" :key="index" style="padding:5px;display:flex;margin-top:1px;margin-left:5px">
                        <div style="flex:2;text-align: end;" :style="{color:getColorName(item)}">{{item.deviceName}}</div>
                        <div style="flex:2;height:20px;line-height:20px;border: 1px solid white;text-align:center;align-content:center;background-color: #0E3170;font-weight: bolder;color:white;">{{item.remark}}</div>
                        <div style="flex:1;margin-left:5px" > {{item.unit}}</div>
                    </div>
                </div>

                <div style="border:1px solid black;margin-top:20px;">
                    <h1 style="text-align:center; padding:10px ; align-content:center">右艉轴艉管模拟量报警和显示</h1>
                
                    <div  v-for="(item,index) in data.one1" :key="index" style="padding:5px;display:flex;margin-top:1px;margin-left:5px">
                        <div style="flex:2;text-align: end;" :style="{'width':'50%',color:getColorName(item)}">{{item.deviceName}}</div>
                        <div style="flex:2;width:60%;height:20px;line-height:20px;border: 1px solid white;text-align:center;align-content:center;background-color: #0E3170;font-weight: bolder;color:white;">{{item.remark}}</div>
                        <div style="flex:1;margin-left:5px" > {{item.unit}}</div>
                    </div>
                </div>
               
              
            </el-col>
            <el-col :span="1" style="border:1px solid #A9AAAC;">
            </el-col>
            <el-col :span="10" style="border:1px solid black;">
                <h1 style="text-align:center; padding:10px ; align-content:center;">右主机遥控开关量报警和显示</h1>
                
                <div style="display:grid; grid-template-columns: repeat(2, 1fr);">
                 
                    <div  v-for="(item,index) in data.two" :key="index" style="padding:5px;display:flex;text-align:center;align-items:center;margin-top:1px;margin-left:20px">
                            <div :class="{'alarmDiv':getFlash(item) }"  :style="{'width':'20px','height':'20px','border-radius':'50%','background':getColor(item)}"></div>
                            <div :style="{'margin-left':'20px',color:getColorName(item)}">{{item.deviceName}}</div>
                    </div>
                   
                </div>
            </el-col>
            <el-col :span="1" style="border:1px solid #A9AAAC;">
            </el-col>
            <el-col :span="6" >
                <div style="border:1px solid black;">
                    <h1 style="text-align:center; padding:10px ; align-content:center;">右齿轮箱、艉管、轴承开关量报警</h1>
                    <div  v-for="(item,index) in data.three" :key="index" style="padding:5px;display:flex;text-align:center;align-items:center;margin-top:1px;margin-left:20px">
                            <div :class="{'alarmDiv':getFlash(item) }"  :style="{'width':'20px','height':'20px','border-radius':'50%','background':getColor(item)}"></div>
                            <div :style="{'margin-left':'20px',color:getColorName(item)}">{{item.deviceName}}</div>
                    </div>
                </div>
                
                <div style="border:1px solid black;margin-top:20px;">
                    <h1 style="text-align:center;  align-content:center;">右艉管开关量报警</h1>
                    <div  v-for="(item,index) in data.three1" :key="index" style="padding:1px;display:flex;text-align:center;align-items:center;margin-top:1px;margin-left:20px">
                            <div :class="{'alarmDiv':getFlash(item) }"  :style="{'width':'20px','height':'20px','border-radius':'50%','background':getColor(item)}"></div>
                            <div :style="{'margin-left':'20px',color:getColorName(item)}">{{item.deviceName}}</div>
                    </div>
                </div>   
            </el-col>
        </el-row>
        
    </div>
</template>
<script>
import {listDevs} from  "@/api/system/device";
import { histogramData } from "@/api/system/chartConfig";
import TemperatureChart from './components/TemperatureChart.vue';

import { mapState } from "vuex";
export default {
 name: "emergencyBoard",
 components:{
  TemperatureChart
 },
 created() {
    this.url=require('@/assets/images/rightAxis.png')
    this.init()
    this.getData();
    if(!this.timer){
    this.timer = setInterval(() => {
        this.init()
        this.getData();
    }, 2000);//3秒刷新次
 }
 },
 computed: {

  ...mapState("app", {   // 对象形式
      alarmList: "alarmList",
      lightSwitch:"lightSwitch",
      extExpSwitch:"extExpSwitch"
  })
},
beforeDestroy() {

  if(this.timer){
      clearInterval(this.timer);
      this.timer=null;
    }
},
 methods:{

    getFlash(row){
        //2、报警消息时，闪烁
        let f = this.alarmList.some(alarm=>
            alarm ==row.deviceId
        );
        if(f){
          if(row.displayAlarm=="2"){//告警
            return true;
          }
        }
        if(this.lightSwitch=='1'  ||this.extExpSwitch=="1")
        {//1、试灯打开
          // console.log("extExpSwitch=="+this.extExpSwitch)
          if(row.displayAlarm=="2"){//告警
            return true;
          }
        }
          return false;
      },
       showGrid() {
          let object = {
            left: "1%", //图表距边框的距离
            right: "16%",
            top: "30%",
            bottom: "5px",
            containLabel: true,
          };
          return object;
        },
      getColorName(row){
        //告警消息
        if("2"== row.displayAlarm){
            let f = this.alarmList.some(alarm=>
            alarm ==row.deviceId
            );
            if(f){
                return 'red';
            }
            //3、显示设备状态颜色
            if(row.warnStatus=='1'||row.warnStatus=='0'){
                return 'black';
            }
            return 'red'
        }
        return "black";
        
      },
      getColor(row){
        if("2"== row.displayAlarm){  //告警类型
          //告警消息
          let f = this.alarmList.some(alarm=>
            alarm ==row.deviceId
          );
          if(f){//2、有报警通知，则显示灯的颜色
            return row.lightColor;
          }
        }
        if(this.lightSwitch=='1' ||this.extExpSwitch=="1"){//1、试灯打开，显示灯的颜色
            console.log("extExpSwitch=="+this.extExpSwitch)
            return row.lightColor;
        }
        //3、显示设备状态颜色
        if(row.warnStatus=='1'||row.warnStatus=='0'){
          return 'grey';
        }
          return row.lightColor;
      },
      async   getData(){
    // console.log(111)
    await  histogramData({deviceGraphicalId:this.currentId}).then( async (response) =>
      {
      this.bar.data =  await response.data;
      // console.log(this.bar.data.data.data)
      let dataList  = this.bar.data.data
      this.bar.xDatas=   dataList.map(item=> {return item.deviceName});
      // console.log(this.bar.xDatas)
      this.bar.yDatas=   [{
              type:'bar',
              barWidth:'20',
              data: dataList.map(item=> {return item.value}),
              // itemStyle:{
              //   normal: {
              //       color: function (params) { //根据数值大小设置相关颜色
              //           if (params.value > 0) {
              //               return 'green'
              //           } else {
              //               return 'red'
              //           }
              //       }
              //   }}
          }]
      console.log("12345",this.bar.yDatas)

    })
    },
    init(){
        listDevs({"deptIds":"04,17,16"}).then(response=>{
          this.loading1=false
            console.log(response)
            let dataArr = response.data;
            if(dataArr){
                console.log(dataArr)
                this.data.one= dataArr.filter(item=>{
                    return  item.systemId.startsWith("17M")
                    }).sort((a,b)=> {
                    return a.systemId.split("-")[1]-b.systemId.split("-")[1]})
                    // this.data.one=this.data.one.slice(0,7)
                console.log("one==", this.data.one)

                this.data.two= dataArr.filter(item=>{
                  return item.systemId.startsWith("04K")
                }).sort((a,b)=> {
                return a.systemId.split("-")[1]-b.systemId.split("-")[1]})  
                console.log("two==", this.data.two)

                this.data.three= dataArr.filter(item=>{
                    return   item.systemId.startsWith("17K")
                    }).sort((a,b)=> {
                    return a.systemId.split("-")[1]-b.systemId.split("-")[1]})   
                    // this.data.three=this.data.three.slice(0,10)

                this.data.one1= dataArr.filter(item=>{
                return  item.systemId.startsWith("16M") && item.deviceName.includes("右艉轴")//1号采集箱  开关量
                }).sort((a,b)=> {
                return a.systemId.split("-")[1]-b.systemId.split("-")[1]})
                   
                this.data.three1= dataArr.filter(item=>{
                return   item.systemId.startsWith("16M") && item.deviceName.includes("右艉轴")//1号采集箱  开关量
                }).sort((a,b)=> {
                return a.systemId.split("-")[1]-b.systemId.split("-")[1]})
                // this.data.three1=this.data.three1.slice(0,10)
                // console.log("three1==", this.data.three1)
               
            }
            
        })
    },
 
   
 },
 data(){
   return{
    loading1:true,
    currentId:this.$route.query.graphId,
    img:"",
       loading :false,
       total: 0,
       data:{
          one:[],
          two:[],
          three:[],
          four:[]
       },
       bar:{
        title:"右轴系温度柱状图",
        timer:null,
        time:this.$route.query.time,
        // data: datas,
        yDatas:[],
        xDatas:[],
        unit:this.$route.query.unit==1?'Kpa':'°C'
      },

        timer:null,
        deptId:this.$route.query.depCode,
 }
}
}
</script>
<style scoped>

.tip {
margin: 2px;
 padding: 1px;
 color: rgb(52 88 124 / 75%);

 border-radius: 20% 0% 40% 0%;
 background-color: rgb(122 132 216 / 19%);
 position: absolute;float:left;margin: 2px;
}

.el-row {
 margin-bottom: 20px;

}
.el-col {
 border-radius: 4px;
}
.bg-purple-dark {
 background: #99a9bf;
}
.bg-purple {
 background: #d3dce6;
}
.bg-purple-light {
 background: #e5e9f2;
}


.parent {
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.child{
flex-basis: 20%;
}
.alarmDiv{
    display:block;
    -webkit-animation-name: imageAnim;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: ease;
    -webkit-animation-play-state: running;
}
@-webkit-keyframes imageAnim{
    0% {opacity: 1;}
    50% {opacity: 0.5;}
    100% {opacity: 0;}
}
.grid-content {
  text-wrap:wrap;
  font-size:clamp(0.7rem, 0.489rem + 1.05vw, 1.2rem);
  }

</style>
